<template>
  <div class="wrapper">

  <!-- header部分 -->
  <header>
      <p>我的购物车</p>
  </header>
  <page-rollback></page-rollback>
  <!-- 商家列表部分 -->
  <ul class="business">
      <!--使用v-for进行循环，避免一直重复li-->
      <li v-for="item in filteredBusinessArr" :key="item.id">
          <!-- 右上角红点 -->
          <div class="business-img" @click="toBusinessInfo(item.businessId)">
              <!--v-bind:，可以用:缩写，v-bind进行绑定，简单而言，不加v-bind，item.businessImg会当成字符串解析，加入冒号，会当成js去解析，显示图片-->
              <img :src="item.businessImg">
              <!--v-show为false不显示，为true显示-->
              <div class="business-img-quantity" v-show = "item.quantity>0">{{ item.quantity }}</div>
          </div>
          <div class="business-info">
              <h3>{{item.businessName}}</h3>
              <p>&#165;{{item.starPrice}}起送 | &#165;{{item.deliveryPrice}}配送</p>
              <p>{{item.businessExplain}}</p>
          </div>
      </li>
  </ul>
  </div>
  
</template>

<script>
import PageRollback from '@/components/PageRollback.vue';
export default{
  name:'BusinessList',
  data(){
      //通过在 data 函数中定义这些属性，Vue 将会将它们转换为响应式数据，这意味着当数据发生变化时，相关的界面部分将会自动更新。
      return{
          businessArr:[],
          cartArr:[],
          user:{}
      }
  },
  created(){
      this.user = this.$getSessionStorage('user');
      
      let url_getBusiness1 = `/BusinessController/listBusinessByOrderTypeId/1`;
      this.$axios.get(url_getBusiness1)
    //     'BusinessController/listBusiness',this.$qs.stringify({
    //   }))
      .then(response =>{ 
        //   console.log(response.data.result)
        this.businessArr = this.businessArr.concat(response.data.result);
      })
      .catch(error => {
          console.error(error);//调用 console.error() 方法，用于将错误信息输出到控制台
      });
      let url_getBusiness2 = `/BusinessController/listBusinessByOrderTypeId/2`;
      this.$axios.get(url_getBusiness2)
    //     'BusinessController/listBusiness',this.$qs.stringify({
    //   }))
      .then(response =>{ 
        //   console.log(response.data.result)
        this.businessArr = this.businessArr.concat(response.data.result);
      })
      .catch(error => {
          console.error(error);//调用 console.error() 方法，用于将错误信息输出到控制台
      });
      let url_getBusiness3 = `/BusinessController/listBusinessByOrderTypeId/3`;
      this.$axios.get(url_getBusiness3)
    //     'BusinessController/listBusiness',this.$qs.stringify({
    //   }))
      .then(response =>{ 
        //   console.log(response.data.result)
        this.businessArr = this.businessArr.concat(response.data.result);
      })
      .catch(error => {
          console.error(error);//调用 console.error() 方法，用于将错误信息输出到控制台
      });
      let url_getBusiness4 = `/BusinessController/listBusinessByOrderTypeId/4`;
      this.$axios.get(url_getBusiness4)
    //     'BusinessController/listBusiness',this.$qs.stringify({
    //   }))
      .then(response =>{ 
        //   console.log(response.data.result)
        this.businessArr = this.businessArr.concat(response.data.result);
      })
      .catch(error => {
          console.error(error);//调用 console.error() 方法，用于将错误信息输出到控制台
      });
      let url_getBusiness5 = `/BusinessController/listBusinessByOrderTypeId/5`;
      this.$axios.get(url_getBusiness5)
    //     'BusinessController/listBusiness',this.$qs.stringify({
    //   }))
      .then(response =>{ 
        //   console.log(response.data.result)
        this.businessArr = this.businessArr.concat(response.data.result);
      })
      .catch(error => {
          console.error(error);//调用 console.error() 方法，用于将错误信息输出到控制台
      });
      let url_getBusiness6 = `/BusinessController/listBusinessByOrderTypeId/6`;
      this.$axios.get(url_getBusiness6)
    //     'BusinessController/listBusiness',this.$qs.stringify({
    //   }))
      .then(response =>{ 
        //   console.log(response.data.result)
        this.businessArr = this.businessArr.concat(response.data.result);
      })
      .catch(error => {
          console.error(error);//调用 console.error() 方法，用于将错误信息输出到控制台
      });
      let url_getBusiness7 = `/BusinessController/listBusinessByOrderTypeId/7`;
      this.$axios.get(url_getBusiness7)
    //     'BusinessController/listBusiness',this.$qs.stringify({
    //   }))
      .then(response =>{ 
        //   console.log(response.data.result)
        this.businessArr = this.businessArr.concat(response.data.result);
      })
      .catch(error => {
          console.error(error);//调用 console.error() 方法，用于将错误信息输出到控制台
      });
      let url_getBusiness8 = `/BusinessController/listBusinessByOrderTypeId/8`;
      this.$axios.get(url_getBusiness8)
    //     'BusinessController/listBusiness',this.$qs.stringify({
    //   }))
      .then(response =>{ 
        //   console.log(response.data.result)
        this.businessArr = this.businessArr.concat(response.data.result);
      })
      .catch(error => {
          console.error(error);//调用 console.error() 方法，用于将错误信息输出到控制台
      });

      let url_getCart = `/CartController/listCart/${this.user.token.token}`;
      this.$axios.get(url_getCart) 
          .then(response => {
            this.cartArr = response.data.result;
            //   console.log(response.data)
              //遍历所有食品列表
              for(let businessItem of this.businessArr){
                  businessItem.quantity = 0;
                  for(let cartItem of this.cartArr){
                      if(cartItem.businessId === businessItem.businessId){
                          businessItem.quantity += cartItem.quantity;
                      }
                  }
              }
              this.businessArr.sort();
          })
          .catch(error =>{
              console.error(error)
          });
  },
  methods:{
      toBusinessInfo(businessId){
          this.$router.push({path:'/businessInfo',query:{businessId:businessId}});
      }
  },
  computed: {
    filteredBusinessArr() {
      return this.businessArr.filter((businessItem) =>
        this.cartArr.some((cartItem) => cartItem.businessId === businessItem.businessId)
      );
    }
  },
  components: {
        PageRollback
    },
}
</script>


<style scoped>
  /****************** 总容器 ******************/
  .wrapper {
      width: 100%;
      height: 100%;
  }

  /****************** header部分 ******************/
  .wrapper header {
      width: 100%;
      height: 12vw;
      background-color: #0097FF;
      color: #fff;
      font-size: 4.8vw;

      /* 固定定位 */
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1000;

      display: flex;
      justify-content: center;
      align-items: center;
  }

  /****************** 商家列表部分 ******************/
  .wrapper .business {
      width: 100%;
      margin-top: 12vw;
      padding-bottom: 14vw;
  }

  .wrapper .business li {
      width: 100%;
      box-sizing: border-box;
      padding: 2.5vw;
      border-bottom: solid 1px #DDD;
      user-select: none;
      cursor: pointer;

      display: flex;
      align-items: center;
  }

  .wrapper .business li .business-img {
      position: relative;
  }

  .wrapper .business li .business-img img {
      width: 20vw;
      height: 20vw;
  }

  .wrapper .business li .business-img .business-img-quantity {
      width: 5vw;
      height: 5vw;
      background-color: red;
      color: #fff;
      font-size: 3.6vw;
      border-radius: 2.5vw;

      display: flex;
      justify-content: center;
      align-items: center;

      /*设置成绝对定位，不占文档流空间*/
      position: absolute;
      right: -1.5vw;
      top: -1.5vw;
  }

  .wrapper .business li .business-info {
      margin-left: 3vw;
  }

  .wrapper .business li .business-info h3 {
      font-size: 3.8vw;
      color: #555;
  }

  .wrapper .business li .business-info p {
      font-size: 3vw;
      color: #888;
      margin-top: 2vw;
  }

  
</style>